<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :before-close="handleClose" :close-on-click-modal="false" :show-close="showClose">
    <slot></slot>
    <div slot="footer" class="dialog-footer" v-if="hasFoot">
      <div v-for="(item, i) in buttons" :key="i" class="btnlist">
        <el-button
          :type="item.type"
          class="dialog-btn"
          size="small"
          :loading="item.loading"
          @click="
            asyncHander(item.method).then((c) => {
              c ? show() : ''
            })
          "
          v-if="!item.show"
          >{{ item.title }}</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      // 关闭之前
      this.show()
      this.$emit("closeDialog")
      this.$emit("closeAddInventory")
    },
    show() {
      // 显示隐藏
      this.dialogVisible = !this.dialogVisible
    },
    async asyncHander(c) {
      // 异步处理函数
      return await c()
    },
  },
  props: {
    // ------- 标题 -------
    title: {
      type: String,
      default: "提示",
    },
    //是否显示关闭按钮
    showClose:{
      type: Boolean,
      default: true,
    },
    // ------- 是否需要遮罩层 -------
    modal: {
      type: Boolean,
      default: true,
    },
    // ------- 宽度 -------
    width: {
      type: String,
      default: "800px",
    },
    // ------- 是否展示底部 -------
    hasFoot: {
      type: Boolean,
      default: true,
    },
    // ------- 底部按钮 -------
    // type 类型(确认：primary,取消：不传)
    // title 文字
    // method 方法，在方法中使用·return 判断是否关闭弹窗
    buttons: {
      type: Array,
      default: function () {
        return [
          {
            type: "primary",
            title: "确认",
            method: () => {
              this.show()
            },
          },
          {
            type: "",
            title: "取消",
            method: () => {
              this.show()
            },
          },
        ]
      },
    },
  },
}
</script>
<style scoped lang="scss">
.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-dialog__header {
  background-color: #fff;
  border-bottom: 1px solid red;
}
.el-dialog {
  border-radius: 4px;
  overflow: auto;
  min-width: 400px;
  max-width: 1400px;
  margin: auto !important;
}
.el-dialog__body {
  min-height: 200px;
  max-height: 500px;
  overflow: auto;
  padding: 20px;
}
.el-dialog__close {
  font-size: 24px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  .btnlist {
    margin-left: 20px;
  }
}
</style>
